<template>
    <div v-loading="loading">
        <el-dialog :visible.sync="visible" :title="type == 'create' ? '添加广告' : '修改广告'" width="1000px">
            <el-form :model="form" label-width="110px">
                <el-form-item label="广告位">
                    <el-select placeholder="选择广告位" v-model="form.space" style="width: 470px">
                        <el-option :key="item.value" :label="item.name" :value="item.value"
                            v-for="item in cate_idList"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="广告跳转类型">
                    <el-select placeholder="选择跳转类型" v-model="form.ad_type" style="width: 470px">
                        <el-option :key="item.value" :label="item.name" :value="item.value"
                            v-for="item in typeList"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="图片">
                    <medium v-model="form.image_url"></medium>
                </el-form-item>

                <el-form-item label="跳转路径">
                    <el-input placeholder="请输入跳转路径" style="width: 472px" v-model="form.url"></el-input>
                </el-form-item>
                <el-form-item label="名称">
                    <el-input placeholder="请输入名称" style="width: 472px" v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="广告描述">
                    <el-input placeholder="请输入广告描述" style="width: 472px" v-model="form.desc"></el-input>
                </el-form-item>

                <el-form-item label="轮播位置" v-if="form.space == 'banner'">
                    <el-select placeholder="选择轮播位置" v-model="form.swipper_cate_id" style="width: 470px">
                        <el-option :key="item.value" :label="item.name" :value="item.value"
                            v-for="item in swipper_cate_idList"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="广告结束时间" size="300">
                    <el-date-picker v-model="form.end_time" type="date" placeholder="选择广告结束时间" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <!-- <el-form-item label="跳转地址类型" v-if="form.space == 'banner'">
                    <el-select placeholder="选择轮播跳转地址类型" v-model="form.swipper_type" style="width: 470px">
                        <el-option :key="item.value" :label="item.name" :value="item.value"
                            v-for="item in swipper_typeList"></el-option>
                    </el-select>
                </el-form-item> -->

                <el-form-item label="位置信息" v-if="form.space == 'banner'">
                    <div class="cursor-pointer">
                        <div @click="getLocation">
                            <i class="el-icon-location-outline"></i>
                            <span class="color-666 ml-6" v-if="!form.address">所在位置</span>
                            <span class="ml-6 color-999" v-else>{{ form.address }}</span>
                        </div>
                    </div>
                </el-form-item>


                <div v-if="form.ad_type == 'inside'" style="margin-top: 50px;">
                    <el-input placeholder="请输入名称" style="width: 200px" v-model="parameter.creation_name"></el-input>
                    <el-select placeholder="选择作品类型" v-model="parameter.creation_type" style="width: 220px">
                        <el-option :key="item.value" :label="item.name" :value="item.value"
                            v-for="item in creation_typeList"></el-option>
                    </el-select>
                    <el-button @click="getWorksList()" size="small" type="primary" style="margin-left: 30px;">搜索</el-button>

                    <el-table :data="worksList" max-height="350px" size="small" style="width: 100%">
                        <el-table-column label="ID" prop="suggest_id" v-if="visible">
                            <template slot-scope="scope">
                                <!-- <el-checkbox
                                    @change="handleCheckedCitiesChange($event, scope.row.creation_id)"></el-checkbox> -->
                                <el-radio v-model="form.creation_id" :label="scope.row.creation_id"
                                    @change="handleCheckedCitiesChange($event, scope.row.creation_id)">
                                    {{ scope.row.creation_id }}
                                </el-radio>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column label="ID" prop="creation_id"></el-table-column> -->
                        <el-table-column label="作品名" prop="creation_name"></el-table-column>
                        <el-table-column label="图片" prop="first_frame">
                            <template slot-scope="scope">
                                <el-image class="border" style="width: 50px; height: 50px" :src="scope.row.first_frame"
                                    :preview-src-list="toArray(scope.row.first_frame)">
                                </el-image>
                            </template>
                        </el-table-column>
                        <el-table-column label="发布人" prop="user_id">
                            <template slot-scope="scope">
                                <UserInfo :user_id="scope.row.user_id" :userInfos="scope.row.author"
                                    v-if="scope.row.user_id" :modalShow="false"></UserInfo>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="block" style="margin-left: 30%;margin-top: 50px;">
                        <el-pagination layout="prev, pager, next" :total="totals" @current-change="currentChange">
                        </el-pagination>
                    </div>
                </div>

            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeBox">取 消</el-button>
                <el-button @click="submit" type="primary" :loading="submitComplete">确 定</el-button>
            </div>
        </el-dialog>

        <el-select placeholder="选择广告位置" v-model="query.space" style="width: 220px">
            <el-option :key="item.value" :label="item.name" :value="item.value"
                v-for="item in swipper_typeList"></el-option>
        </el-select>
        <el-select placeholder="选择广告跳转类型" v-model="query.ad_type" style="width: 220px">
            <el-option :key="item.value" :label="item.name" :value="item.value" v-for="item in typeList"></el-option>
        </el-select>
        <el-select placeholder="选择广告状态" v-model="query.status" style="width: 220px">
            <el-option :key="item.value" :label="item.name" :value="item.value" v-for="item in statusList"></el-option>
        </el-select>

        <el-select placeholder="是否已结束" v-model="query.is_end_time" style="width: 220px">
            <el-option :key="item.value" :label="item.name" :value="item.value" v-for="item in endTimeType"></el-option>
        </el-select>

        <el-button @click="page=1;init()" size="small" type="primary" style="margin-left: 30px;width: 80px">搜索</el-button>

        <el-button @click="page=1;init()" icon="el-icon-refresh-right" size="small" type="primary">刷新</el-button>

        <el-button @click="toForm()" size="small" style="width: 80px" type="success"
            v-permission="['ADMIN', 'AD_ADD']">添加</el-button>
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-table :data="data" max-height="550px" size="small" style="width: 100%">
                <el-table-column label="ID" prop="id"></el-table-column>
                <el-table-column label="轮播位置" prop="space">
                    <template slot-scope="scope">
                        <div v-if="scope.row.space == 'infomation'">帖子</div>
                        <div v-else-if="scope.row.space == 'short'">短视频</div>
                        <div v-else-if="scope.row.space == 'banner'">{{scope.row.swipper_cate_id==1?'直播页':'长视频页'}}</div>
                        <div v-else-if="scope.row.space == 'startup'">启动页</div>
                    </template>
                </el-table-column>
                <el-table-column label="广告名" prop="name">
                </el-table-column>
                <el-table-column label="图片" prop="image_url">
                    <template slot-scope="scope">
                        <el-image v-if="scope.row.image_url" class="border" style="width: 50px; height: 50px"
                            :src="scope.row.image_url" :preview-src-list="toArray(scope.row.image_url)">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column label="内部地址作品ID" prop="created_id"></el-table-column>
                <el-table-column label="图标" prop="icon">
                    <template slot-scope="scope">
                        <el-image v-if="scope.row.icon" class="border" style="width: 50px; height: 50px"
                            :src="scope.row.icon" :preview-src-list="toArray(scope.row.icon)">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column label="浏览量" prop="viewed">
                </el-table-column>
                <el-table-column label="点击量" prop="clicked"></el-table-column>
                <el-table-column label="外部跳转链接" prop="url">
                    <template slot-scope="scope">
                        <div v-if="scope.row.ad_type == 'outside'">
                            <a :href="scope.row.url" target="_blank" style="color: #409eff;"> {{scope.row.url}}</a>
                        </div>
                       
                    </template>
                  
                </el-table-column>
                <el-table-column label="添加时间" sortable prop="created_at"></el-table-column>
                <el-table-column label="操作" width="200px">
                    <template slot-scope="scope">
                        <el-button @click="toForm(scope.row)" size="mini" type="primary" style="padding: 10px"
                            v-permission="['ADMIN', 'AD_UPDATE']">修改</el-button>
                        <el-popconfirm @confirm="del(scope.row.id)" title="这是一段内容确定删除吗？">
                            <el-button size="mini" slot="reference" type="danger" style="padding: 10px"
                                v-permission="['ADMIN', 'AD_DELETE']">删除</el-button>
                        </el-popconfirm>
                        <el-button size="mini" slot="reference" type="success" style="padding: 10px"
                            @click="toDetails(scope.row.id)"   v-permission="['ADMIN', 'AD_DETAILS']">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 分页组件 -->
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-pagination :current-page="page" :total="total" @current-change="pageChange" @size-change="sizeChange"
                layout="total, prev, pager, next, sizes" style="margin-top: 8px;" />
        </el-card>

        <location @address="getAddress" ref="location"></location>
    </div>
</template>
      
<script>
import treeSelect from '@/components/SelectTree/index'
import medium from '@/components/medium/index'
import initData from '@/mixins/index'
import location from '@/components/location'
export default {
    name:"ad-list",
    mixins: [initData],
    components: {
        treeSelect,
        medium,
        location
    },
    data() {
        return {
            query: {
                status: 1,
                space: '',
                ad_type: '',
                is_end_time:null
            },
            form: {
                space: '', //广告位
                ad_type: '',//广告跳转类型
                url: '',
                name: '',
                desc: '',
                image_url: '',
                longitude: '',//banner经度
                longitude: '',//banner纬度
                swipper_cate_id: '',//banne轮播位置 1直播 2长视频
                swipper_name: '',//banne名称
                swipper_thumbnail: '',//banne图片
                address: '',
                creation_id: '',//inside传
                end_time: ''
            },
            typeList: [
                {
                    name: '外部',
                    value: 'outside',
                },
                {
                    name: '内部',
                    value: 'inside',
                }
            ],
            endTimeType: [
                {
                    name: '已结束',
                    value: 1,
                },
                {
                    name: '未结束',
                    value: 0,
                }
            ],
            statusList: [
                {
                    name: '下架',
                    value: 0,
                },
                {
                    name: '上架',
                    value: 1,
                }
            ],
            creation_typeList: [
                {
                    name: '短视频',
                    value: 'short',
                },
                {
                    name: '长视频',
                    value: 'long',
                },
                // {
                //     name: '帖子',
                //     value: 'infomation',
                // }
            ],
            visible: false,
            loading: false,
            page: 1,
            tableData: [],
            worksList: [],
            type: 'create',
            worksId: '',

            cate_idList: [
                {
                    name: '启动页',
                    value: 'startup',
                },
                {
                    name: '轮播图',
                    value: 'banner',
                }],
            swipper_typeList: [
                {
                    name: '长视频',
                    value: 'long',
                },
                {
                    name: '启动页',
                    value: 'startup',
                },
                {
                    name: '短视频',
                    value: 'short',
                }, {
                    name: '帖子',
                    value: 'infomation',
                }, {
                    name: '横幅位',
                    value: 'banner',
                }
            ],
            swipper_cate_idList: [
                {
                    name: '直播',
                    value: 1,
                },
                {
                    name: '长视频',
                    value: 2,
                }],


            submitComplete: false,
            totals: 0,
            parameter: {
                page: 1,
                size: 10,
                creation_name: "",
                creation_type: 'short'
            },
        }
    },
    mounted() {
        this.getWorksList()
        this.beforeInit()
    },
    methods: {
        toArray(str) {
            const arr = []
            arr.push(str)
            return arr
        },
        toDetails(id) {
            this.$router.push({ path: "/ad-details?id=" + id });
        },
        getLocation() {
            this.$refs.location.visible = true
        },
        getAddress(data) {
            console.log('返回的位置信息', data)
            this.$set(this.form, 'address', data.address ? data.address : '')
            this.$set(this.form, 'province', data.province ? data.province : '')
            this.$set(this.form, 'city', data.city ? data.city : '')
            this.$set(this.form, 'area', data.area ? data.area : '')
            this.$set(this.form, 'longitude', data.longitude ? data.longitude : '')
            this.$set(this.form, 'latitude', data.latitude ? data.latitude : '')
        },

        handleCheckedCitiesChange(event, creation_id) {
            console.log("value", event, creation_id)

            this.form.creation_id = creation_id
            console.log(this.form.creation_id)



        },

        beforeInit() {
            this.url = '/ad/index'
            this.init() //重新请求数据
        },
        currentChange(val) {
            console.log(val)
            this.parameter.page = val
            this.getWorksList()
        },


        getWorksList(id) {
            this.$request.get('/creation/index', this.parameter).then((res) => {
                this.totals = res.page.total
                this.worksList = res.items
            })
        },

        del(id) {
            this.$request.del('/ad/delete/' + id).then((res) => {
                this.$message.success('删除成功')
                this.init() //重新请求数据
            })
        },

        toForm(form = null) {
            this.visible = true //打开弹出框

            if (form != null) {
                this.type = 'update'
                this.form = form
            } else {
                this.type = 'create'
                this.worksId = ""
                this.form = {
                    space: '', //广告位
                    ad_type: '',//广告跳转类型
                    url: '',
                    name: '',
                    desc: '',
                    image_url: '',
                    longitude: '',//banner经度
                    longitude: '',//banner纬度
                    swipper_cate_id: '',//banne轮播位置 1直播 2长视频
                    swipper_name: '',//banne名称
                    swipper_thumbnail: '',//banne图片
                    address: '',
                    creation_id: '',//inside传
                    end_time:''
                }
            }
        },

        closeBox() {
            this.type = 'create'
            this.visible = false
            this.form = {
                space: '', //广告位
                ad_type: '',//广告跳转类型
                url: '',
                image_url: '',//inside传
                longitude: '',//banner经度
                longitude: '',//banner纬度
                swipper_cate_id: '',//banne轮播位置 1直播 2长视频
                swipper_name: '',//banne名称
                swipper_thumbnail: '',//banne图片
                swipper_type: '',//banne跳转地址类型
                address: ''
            }
        },


        //提交
        submit() {
        console.log('form',this.form)
            if (this.submitComplete) return
            this.submitComplete = true

            if (this.form.space == 'startup') {
                delete this.form.longitude
                delete this.form.latitude
                delete this.form.swipper_cate_id
                delete this.form.swipper_name
                delete this.form.swipper_thumbnail
                delete this.form.swipper_type
                delete this.form.address
            } else {
                delete this.form.address
            }
            if (this.form.ad_type != 'inside') {
                delete this.form.creation_id
            }

            if (!(this.form.image_url && this.form.space && this.form.ad_type && this.form.url)) {
                this.$message({
                    message: '请将信息填写完整！',
                    type: 'warning'
                });
                this.submitComplete = false
                return
            }
            if (this.type == 'create') {
                this.$request.post('/ad/create', this.form).then((res) => {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });
                    this.submitComplete = false
                    this.init() //重新请求数据
                    this.closeBox()
                }).catch((error) => {
                    this.submitComplete = false
                });
            } else {
                this.$request.put('/ad/update/' + this.form.id, this.form).then((res) => {
                    console.log(res)
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.submitComplete = false
                    this.init() //重新请求数据
                    this.closeBox()
                }).catch((error) => {
                    this.submitComplete = false
                });
            }
        },
    },
}
</script>
      
<style lang="scss" scoped>
.butBox {
    background-color: rgb(219, 219, 219);
    border: none;
    color: #555;
}
</style>